<script setup>
// import Header from '@/components/header/Header.vue'
import {useRouter} from 'vue-router'
import image from '@/assets/images/index/cart_none.png'

const router = useRouter()
const goHomeClick = () => {
  router.push('/')
}
</script>

<template>
  <div class="cart">
<!--    <Header title="购物车" />-->
    <div class="content">
      <img class="cart_bg" src="@/assets/images/index/cart_bg.png" alt="">
      <div class="image_box">
        <van-image
          lazy-load
          :src="image"
          radius=".8rem"
          class="cart_none"
        >
        </van-image>
      </div>
      <span class="text">
      购物车暂无商品
    </span>
      <div @click="goHomeClick" class="button">去逛逛</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cart{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  .content{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    position: relative;
    .cart_bg{
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: auto;
    }
    .image_box{
      margin: 23.5rem auto 1rem auto;
      width: 6.7rem;
      height: 8.4rem;
    }
    .cart_none{
      display: block;
      width: 100%;
      height: 100%
    }
    .text{
      font-size: 1.4rem;
      color: #666666;
    }
    .button{
      margin-top: 2rem;
      padding: 0 3rem;
      height: 3.8rem;
      background: var(--van-primary-color);
      border-radius: .5rem;
      line-height: 3.8rem;
      font-size: 1.6rem;
      color: #FFFFFF;
    }
    .button:active{
      background: #4b947f;
    }
  }
  }
</style>
